<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .qrcodelist {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      a{
        outline: none;
        color: #000;
        text-decoration: none;
      }
      
      a:hover{
        color: #999;
        text-decoration: underline;
      }
      a.active{
        color: red;
      }
    </style>
  </head>
  <body>
    <h1><a href="./createQR.html">js生成二维码(不支持中文编码)</a></h1>
    <h1 ><a class="active" href="./createQR copy.html">js生成二维码(支持中文编码和中间生成logo)</a></h1>
    <div class="qrcodelist">
      <div class="qrcodeItem">
        <div id="qrcode4"></div>
        <div class="txt">二维码内容: https://www.baidu.com/</div>
      </div>
      <div class="qrcodeItem">
        <div id="qrcode5"></div>
        <!-- <div class="txt">二维码内容: 这是修改了官文的js文件，此时生成的二维码支持中文和LOGO</div> -->
      </div>
      <!-- <img src="./image/icon2.jpeg" alt=""> -->
    </div>
  </body>
  <script src="./jquery.min.js"></script>
  <script src="./js/utf-8.js"></script>
  <script src="./js/jquery.qrcode.js"></script>
  <script>
    jQuery(function () {
      jQuery("#qrcode1").qrcode("https://www.baidu.com/");
      jQuery("#qrcode2").qrcode("131231412412");
      //   生成200*200(宽度200，高度200)的二维码
      jQuery("#qrcode3").qrcode({
        render: "canvas", //也可以替换为table
        foreground: "pink", //红码（方块颜色）
        background: "#FFF", //背景颜色
        width: 200,
        height: 200,
        text: "1fsfsdfdfsf",
      });
      //生成前景色为红色背景色为白色的二维码
      jQuery("#qrcode4").qrcode({
        render: "canvas", //也可以替换为table
        // text: "这是修改了官文的js文件，此时生成的二维码支持中文和LOGO", //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
        width: "200", //二维码的宽度(填了中间才有logo)
        height: "200", //二维码的高度(填了中间才有logo)
        foreground: "#C00", //红码（方块颜色）
        background: "#FFF", //背景颜色
        text: "https://www.baidu.com/",
        src: "./image/icon2.jpeg", //二维码中间的图片
      });
      jQuery("#qrcode5").qrcode({
        render: "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
        text: "这是修改了官文的js文件，此时生成的二维码支持中文和LOGO", //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
        width: "200", //二维码的宽度(填了中间才有logo)
        height: "200", //二维码的高度(填了中间才有logo)
        background: "#ffffff", //二维码的后景色
        foreground: "#000000", //二维码的前景色
        src: "./image/icon2.jpeg", //二维码中间的图片
      });
    });
  </script>
</html>
